<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Simon Johnson">
    <title>MQTT-SN</title>

    <link rel="apple-touch-icon" sizes="180x180" href="/console/img/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/console/img/favicon/android-chrome-192x192.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/console/img/favicon/android-chrome-192x192.png">

    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    <script src="/console/js/autocomplete.js"></script>

    <link href="/console/css/style.css" rel="stylesheet">
    <link href="/console/css/ribbon.css" rel="stylesheet">
</head>
<body class="d-flex flex-column min-vh-100">
<header class="navbar sticky-top header-left flex-md-nowrap p-0">
    <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#"></a>
    <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <input class="form-control form-control-dark w-100 rounded-0 border-0 border-bottom" type="text" placeholder="Search sessions by Client Identifier" aria-label="Search" id="searchField">
    <div id="searchHistory"></div>
    <div class="navbar-nav">
        <div class="nav-item text-nowrap">
            <span class="px-3 cloud-status">Cloud : <span id="cloudStatus"></span></span>
        </div>
    </div>
</header>
<main class="flex-shrink-0">
    <div class="container-fluid">
        <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
            <div class="position-sticky pt-3">
                <ul class="nav nav-pills flex-column" style="margin-top: 27px">
                    <li class="nav-item" style="text-align: center">
                        <img src="/console/img/logo-no-background.png" alt="" height="180">
<!--                        <img src="/console/img/icon-hivemq-lab.png" alt="" height="180">-->

                    </li>
                    <hr>
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#" id="dashboardLink">
                            <i class="fs-6 bi-activity"></i>
                            Dashboard
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" id="clientsLink">
                            <i class="fs-6 bi-sim"></i>
                           Clients
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" id="configLink">
                            <i class="fs-6 bi-journal-text"></i>
                            Configuration
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" id="topicsLink">
                            <i class="fs-6 bi-hash"></i>
                            Topics
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" id="transportLink">
                            <i class="fs-6 bi-router"></i>
                            MQTT-SN Transports
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" id="connectorsLink">
                            <i class="fs-6 bi-bezier"></i>
                            MQTT Connectors
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" id="protocolBridgesLink">
                            <i class="fs-6 bi-node-plus"></i>
                            Protocol Bridges
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" id="dlqLink">
                            <i class="fs-6 bi-envelope-exclamation"></i>
                            Dead Letter
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" id="logLink">
                            <i class="fs-6 bi-file-text"></i>
                            Logs
                        </a>
                    </li>

                    <hr>

                    <li class="nav-item">
                        <a class="nav-link cloud" href="#" id="cloudLink">
                            <i class="fs-6 bi-cloud"></i>
                            Mqtt-sn Cloud
                        </a>
                    </li>
                    <hr>
                    <li class="nav-item">
                        <a class="nav-link" href="https://github.com/oasis-open/mqtt-sn-sample-resources/blob/main/docs/mqtt-sn-implementation-guide.adoc" target="_blank">
                            <i class="fs-6 bi-journals"></i>
                            Documentation
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://github.com/simon622/mqtt-sn" target="_blank">
                            <i class="fs-6 bi-github"></i>
                            GitHub
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" id="licensesLink">
                            <i class="fs-6 bi-briefcase"></i>
                            Licenses
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
            <div style="margin-top: 20px;" id="messages"></div>
            <div class="container align-items-center flex-wrap justify-content-between" style="margin-top: 20px; margin-bottom: 53px;" id="dyna">
            </div>
        </div>
    </div>
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        </div>
    </div>
</main>
<footer class="footer mt-auto py-3 bg-light fixed-bottom">
    <div class="container">
        <div class="float-start" style="margin-left: 190px;"><a href="https://github.com/simon622/mqtt-sn">SLJ MQTT-SN Gateway</a> - licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache 2</a></div>
        <div class="float-end"><div id="connectorStatus"></div></div>
    </div>
</footer>
<script>

    var sessionId;
    var timerIds = [];

    bindClick('#dashboardLink', "dashboard.html", true);
    bindClick('#clientsLink', "clients.html");
    bindClick('#configLink', "config.html");
    bindClick('#topicsLink', "topics.html");
    bindClick('#clusterLink', "cluster.html");
    bindClick('#protocolBridgesLink', "bridges.html");
    bindClick('#transportLink', "transport.html");
    bindClick('#connectorsLink', "connectors.html");
    bindClick('#systemLink', "system.html");
    bindClick('#dlqLink', "dead-letter.html");
    bindClick('#logLink', "logs.html");
    bindClick('#cloudLink', "cloud.html");
    bindClick('#licensesLink', "licenses.html");

    function bindClick(selector, page, loadnow = false){
        $(selector).click(function() {
            clearTimers();
            $("#messages").html('');
            $.ajax({
                url: "/console/async?page=" + page,
                success: function( result ) {
                    $("#dyna").html(result);
                }
            });
            $('.nav li a').removeClass('active');
            $(this).toggleClass('active');
        });
        if(loadnow){
            $(selector).click();
        }
    }

    function updateHtmlElementUrlTimerByIdGlobal(id, refreshRate, url){
        updateHtmlElementUrlTimer(document.getElementById(id), refreshRate, url, false);
    }

    function updateHtmlElementUrlTimer(el, refreshRate, url, track){
        pageTimer(refreshRate, track, function(){
            updateHtmlElementUrl(el, url);
        });
    }

    function pageTimer(refreshRate, track, f){
        var id = setInterval(f, refreshRate);
        if(track) timerIds.push(id);
    }

    function clearTimers(){
        timerIds.forEach(function(id) {
            clearInterval(id);
        });
        timerIds = [];
    }

    function enableCloudServices(){
        // document.getElementById("alarmsLink").disabled = false;
        // $('#alarmsLink').removeClass('disabled');
    }

    function disableCloudServices(){
        // document.getElementById("alarmsLink").disabled = true;
        // $('#alarmsLink').addClass('disabled');
    }

    function updateHtmlElementUrl(el, url){
        $.ajax({
            dataType: "html",
            url: url,
            type: "GET",
            success: function (data,status,xhr) {   // success callback function
                $(el).html(data);
            },
            error: function (jqXhr, textStatus, errorMessage) { // error callback
                $(el).html("Unavailable");
            }
        });
    }

    function command(cmd){
        $.ajax({
            type: "GET",
            url: "/console/command?_cmd=" + cmd,
            encode: true
        }).
        done(function (data) {
            if(data.hasOwnProperty("msg")){
                renderMessage(data);
            }
        });
    }

    updateHtmlElementUrlTimerByIdGlobal("connectorStatus", 2000, "/console/connector/status");

    updateHtmlElementUrlTimerByIdGlobal("cloudStatus", 5000, "/console/cloud/status");

    const field = document.getElementById('searchField');
    const ac = new Autocomplete(field, {
        data: [{label: "", value: ""}],
        maximumItems: 20,
        onSelectItem: ({label, value}) => {
            sessionId = value;
            if(sessionId !== null){
                $.ajax({
                    url: "/console/async?page=session.html&clientId=" + sessionId,
                    success: function( result ) {
                        $("#dyna").html(result);
                    }
                });
                field.value = '';
            }
        },
        onInput: (value) => {
            $.getJSON("/console/search?searchTerm=" + value, function (update){
                // console.log("user input: " + JSON.stringify(update));
                ac.setData(update);
                ac.renderIfNeeded();
            });
        }
    });
</script>


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="/console/js/script.js"></script>
</body>
</html>